<template>
  <view class="login theme-2d">
    <!-- #ifndef H5 -->
    <text
      class="music"
      :class="{
        playing: STATE.setting.IS_OPEN_BG_MUSIC,
        'cuIcon-musicfill': STATE.setting.IS_OPEN_BG_MUSIC,
        'cuIcon-musicforbidfill': !STATE.setting.IS_OPEN_BG_MUSIC
      }"
      @click="onClickMusic"
    ></text>
    <!-- #endif -->
    <view class="header">
      <view class="logo animated animation-slide-top"><image :src="IMAGES.LOGIN_LOGO_01" mode="widthFix"></image></view>
      <view class="spirit">
        <view class="left animated animation-slide-left"><image :src="IMAGES.LOGIN_IMG_01"></image></view>
        <view class="right animated animation-slide-right"><image :src="IMAGES.LOGIN_IMG_02"></image></view>
      </view>
    </view>
    <view class="body">
      <view class="mobile-box" v-if="isMobileLogin">
        <view class="mobile-code">
          <picker @change="onChangeCode" mode="selector" :value="codeIndex" :range="codeArr">
            <view>{{ codeArr[codeIndex] }}</view>
          </picker>
        </view>
        <view class="mobile-inner">
          <input type="number" v-model="formData.mobile" placeholder-style="font-size:12px;letter-spacing: 0;line-height:30rpx;" maxlength="11" placeholder="请输入手机号" />
        </view>
      </view>
      <!-- 用户名登录 -->
      <view class="mobile-box" v-if="!isMobileLogin">
        <view class="mobile-code">用户名</view>
        <view class="mobile-inner">
          <input type="text" v-model="formData.username" placeholder-style="font-size:12px;letter-spacing: 0;line-height:30rpx;" placeholder="字母和数字组合,不能少于六位" />
        </view>
      </view>
      <view class="mobile-box" v-if="!isMobileLogin" style="margin-top: 20rpx;">
        <view class="mobile-code">密码</view>
        <view class="mobile-inner">
          <input
            type="password"
            v-model="formData.password"
            placeholder-style="font-size:12px;letter-spacing: 0;line-height:30rpx;"
            maxlength="11"
            placeholder="长度在6-18位之间"
          />
        </view>
      </view>

      <view class="clause">
        <view class="clause-label">登录或注册即代表同意</view>
        <navigator class="clause-link" url="/pages/common/article?id=1">《17wan隐私政策》</navigator>
        与
        <navigator class="clause-link" url="/pages/common/article?id=2">《17wan用户协议》</navigator>
      </view>
      <view class="btn-group" v-if="isMobileLogin">
        <button class="get-code" @tap="onClickGetVerify" type="primary">获取验证码</button>
        <button class="pwd-login" @tap="onClickPwdLogin" type="primary">密码登录</button>
      </view>
      <view class="btn-group" v-else><button class="pwd-login" @tap="onClickUserNameLogin" type="primary">登录</button></view>
    </view>
    <view class="footer">
      <view class="title">其他方式登录</view>
      <view class="three-login">
        <!-- #ifdef APP-PLUS -->
        <view @tap="login" data-type="qq"><ly-icons type="qq" color="#ffffff" size="32"></ly-icons></view>
        <view @tap="login" data-type="weixin"><ly-icons type="weixin" color="#ffffff" size="36"></ly-icons></view>
        <!-- #endif -->
        <view @tap="loginMobile"><ly-icons type="mobile" color="#ffffff" size="28"></ly-icons></view>
      </view>
    </view>
  </view>
</template>
<script>
import lyIcons from "@/lyui/ly-icons/ly-icons";
import { IMAGES, AUDIOS } from "@/config/resources";
import uniApp from "@/utils/uni-app";
import { isMobileNumber } from "@/utils";
import user from "@/api/modules/user";
export default {
  components: {
    lyIcons
  },
  computed: {
    IMAGES: () => IMAGES
  },
  data() {
    return {
      isMobileLogin: false, // 是否是手机登录

      lifeTime: 60,
      codeIndex: 0,
      codeArr: ["+86"],
      formData: {
        username: "",
        mobile: "",
        code: "+86"
      }
    };
  },
  methods: {
    // #ifndef H5
    onClickMusic() {
      this.$store.commit("setting/TOGGLE_BG_MUSIC");
    },
    // #endif
    onChangeCode({ target }) {
      this.codeIndex = target.value;
      this.formData.code = this.codeArr[target.value];
    },
    loginMobile() {
      this.isMobileLogin = true;
    },
    onClickGetVerify() {
      if (!this.formData.mobile) {
        uniApp.alert("请输入手机号");
        return false;
      }
      if (!isMobileNumber(this.formData.mobile)) {
        uniApp.alert("请输入正确的手机号");
        return false;
      }
      uni.navigateTo({
        url: "/pages/common/verifyLogin_v2?mobile=" + this.formData.mobile
      });
    },
    onClickPwdLogin() {
      if (!this.formData.mobile) {
        uniApp.alert("请输入手机号");
        return false;
      }
      user
        .mobileIsCanLogin(this.formData.mobile)
        .then(res => {
          uni.navigateTo({
            url: "/pages/common/pwdLogin_v2?mobile=" + this.formData.mobile
          });
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg);
        });
    },
    login({ currentTarget }) {
      let type = currentTarget.dataset.type;
      // #ifdef APP-PLUS
      uni.login({
        provider: type,
        success: loginRes => {
          uni.getUserInfo({
            provider: type,
            fail: fail => {
              console.warn(fail);
            },
            success: infoRes => {
              this.$store
                .dispatch("user/oauthLogin", { type, userinfo: infoRes.userInfo })
                .then(_ => {
                  uniApp.toast(_.msg || "登录成功");
                  setTimeout(function() {
                    uni.reLaunch({
                      url: "/pages/common/home/index"
                    });
                  }, 1000);
                })
                .catch(e => {
                  uniApp.alert(e.message || e.data.msg || "登录失败");
                });
            }
          });
        },
        fail: err => {
          uniApp.alert(err.errMsg);
          console.warn("err");
          console.warn(err);
        }
      });
      // #endif
    },
    // 用户名+密码登录
    onClickUserNameLogin() {
      if (!this.formData.username) {
        uniApp.alert("请输入用户名");
        return false;
      }
      if (!this.formData.password) {
        uniApp.alert("请输入密码");
        return false;
      }
      this.$store
        .dispatch("user/unameLogin", {
          uname: this.formData.username,
          password: this.formData.password
        })
        .then(res => {
          uniApp.toast(res.msg || "登录成功");
          setTimeout(function() {
            uni.reLaunch({
              url: "/pages/common/home/index"
            });
          }, 1000);
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.theme-2d.login {
  background-image: linear-gradient(100deg, #e6a7d5, #92b6e5);
  .music {
    background-color: rgba($color: #000000, $alpha: 0.75);
    border-radius: 100%;
    padding: 10upx;
    position: fixed;
    right: 60upx;
    top: 60upx;
    font-size: 32upx;
    z-index: 10000;
    color: #ffffff;
    &.playing {
      @include rotating();
    }
  }
  .header {
    padding-top: 50upx;
    position: relative;
    overflow: hidden;
    .logo {
      left: 0;
      right: 0;
      z-index: 3;
      position: absolute;
      width: 412upx;
      height: 152upx;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .spirit {
      z-index: 2;
      margin-top: 120upx;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .left {
        margin-right: -90upx;
        margin-bottom: -20upx;
        z-index: 1;
        width: 348upx;
        height: 486upx;
      }
      .right {
        margin-left: -90upx;
        margin-top: 20upx;
        margin-bottom: -60upx;
        z-index: 0;
        width: 335upx;
        height: 376upx;
      }
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .body {
    .clause {
      .clause-label {
        color: #76727a;
      }
      .clause-link {
        color: #fa4b8b;
      }
    }
    .btn-group {
      .get-code {
        background-color: #fa4b8b;
        color: #ffffff;
        box-shadow: 0 10upx 0 #f580ab;
      }
    }
  }
}
// 公共部分
.login {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  overflow: hidden;

  .body {
    .mobile-box {
      padding: 0 20upx;
      width: 80%;
      margin: 0 auto;
      background-color: #ffffff;
      border-radius: 90upx;
      height: 90upx;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .mobile-code {
        width: 100upx;
        text-align: center;
        picker {
          background-color: #ffffff;
          color: #656565;
          font-size: 34upx;
          text-align: center;
          appearance: none;
        }
      }
      .mobile-inner {
        width: calc(100% - 100upx);
        input {
          height: 90upx;
          line-height: 90upx;
          font-size: 32upx;
          letter-spacing: 10upx;
        }
      }
    }
    .clause {
      font-size: 20upx;
      margin: 20upx auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .btn-group {
      margin: 0 auto;
      margin-top: 50upx;
      width: 400upx;
      button {
        margin: 20upx auto;
        height: 90upx;
        border-radius: 90upx;
        line-height: 90upx;
        &:active {
          transform: scale(1.1);
        }
      }

      .pwd-login {
        background-color: transparent;
        border: 2upx solid #ffffff;
      }
    }
  }
  .footer {
    width: 100%;
    .title {
      color: #ffffff;
      text-align: center;
      line-height: 100upx;
    }
    .three-login {
      display: flex;
      align-items: center;
      justify-content: center;
      > view {
        margin: 0 30upx;
      }
    }
  }
}
.placeholder-class {
  color: #656565;
  font-size: 32upx;
}
</style>
